<template>
  <div>
    <el-row
      type="flex"
      justify="center"
      align="middle"
      class="login"
    >
      <el-form
        :model="form"
        label-width="80px"
      >

        <el-form-item>
          <h1>登录页</h1>
        </el-form-item>

        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input
            v-model="form.password"
            type="password"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="loginHandle"
          >登录</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
// 导入之前封装的 api
import { userLogin } from "@/api";
// 导入之前的本地存储封装
import { setToken, setUserInfo } from "@/utils/myToken";
export default {
  data() {
    return {
      form: {
        username: "10086",
        password: "123",
      },
    };
  },
  methods: {
    loginHandle() {
      console.log("你点击了登录按钮");
      // 解构出表单中的 用户名 和 密码
      const { username, password } = this.form;
      // 1. 校验表单数据 - 是否为空判断
      if (!username || !password) {
        // 记得 return
        return this.$message.error("请输入完整信息。");
      }
      // 2. 登录逻辑，调用登录接口，传递用户名和密码
      userLogin({ username, password }).then((res) => {
        // console.log(res);
        // 如果返回值中有 res.data.data
        if (res.data.data) {
          // 解构出 token 和 user 信息
          const { token, user } = res.data.data;
          // 把 token 保存到本地
          setToken(token);
          // 把 user 用户信息保存到本地
          setUserInfo(user);
          // 替换到首页
          this.$router.replace("/");
          // 成功提示
          this.$message.success("欢迎入坑");
        } else {
          // 失败提示
          this.$message.error("用户名或密码错误");
        }
      });
    },
    resetHandle() {
      console.log("你点击了重置按钮");
      // 清空数据
      this.form = { username: "", password: "" };
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  flex-direction: column;
  // background: url(https://www.bing.com/th?id=OHR.FoucaultsPendulum_ZH-CN9435794626_1920x1080.jpg);
}
</style>